<template>
  <div style="margin: 20px 0 0 10px">
    <!--  条件搜索  -->
    <div>
      <el-form :model="queryData">
        <el-row>
          <el-col :span="10">
            <el-form-item label="故障编码">
              <el-input v-model="queryData.id" style="width: 400px;margin-right: 20px" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="上报时间">
              <el-date-picker
                v-model="queryData.assignTimeRange"
                type="daterange"
                value-format="timestamp"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" style="margin-left: 20px" @click="search">搜索</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="故障区域">
              <el-radio-group v-model="queryData.type" @change="typeChanged">
                <el-radio-button
                  v-for="type in types"
                  :label="type"
                >
                  {{ type }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item></el-col>
          <el-col :span="10">
            <el-form-item label="故障类型">
              <el-checkbox-group v-model="queryData.faultTypes" @change="faultTypesChanged">
                <el-checkbox-button
                  v-for="type in faultTypes"
                  :label="type"
                >
                  {{ type }}
                </el-checkbox-button>
              </el-checkbox-group></el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="时限(天)">
          <el-checkbox-group v-model="queryData.limitTimes">
            <el-checkbox-button
              v-for="limit in limitTimes"
              :label="limit"
              @change="limitChanged"
            >
              {{ limit }}
            </el-checkbox-button>
          </el-checkbox-group></el-form-item>
        <el-form-item label="故障程度">
          <el-checkbox-group v-model="queryData.importanceArray">
            <el-checkbox-button
              v-for="importance in importanceArray"
              :label="importance"
              @change="importanceChanged"
            >
              {{ importance }}
            </el-checkbox-button>
          </el-checkbox-group></el-form-item>
      </el-form>
    </div>
    <!--  数据表格  -->
    <div style="margin-top: 10px">
      <el-table
        :data="faults"
        border
        stripe
        fit
        highlight-current-row
        style="width: 100%"
      >

        <el-table-column type="expand" label="详细信息" width="80">
          <template slot-scope="props">
            <div style="display: flex">
              <div style="width: 80%">
                <el-form label-position="center">
                  <el-row>
                    <el-col :span="6">
                      <el-form-item label="报修人姓名">
                        <span>{{ props.row.resident.name }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="报修人联系方式">
                        <span>{{ props.row.resident.phone }}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row v-if="pageType > 0">
                    <el-col :span="6">
                      <el-form-item label="维修人工号">
                        <span>{{ props.row.repairman.workId }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="维修人姓名">
                        <span>{{ props.row.repairman.name }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="维修人联系方式">
                        <span>{{ props.row.repairman.phone }}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row v-if="pageType === 4">
                    <el-col :span="6">
                      <el-form-item label="审核人工号">
                        <span>{{ props.row.reviewer.workId }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="审核人姓名">
                        <span>{{ props.row.reviewer.name }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="维修人联系方式">
                        <span>{{ props.row.reviewer.phone }}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="6">
                      <el-form-item v-if="pageType !== 0" label="任务下发时间">{{ props.row.assignTime }}</el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item v-if="pageType >= 3" label="任务完成时间">{{ props.row.resolveTime }}</el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item v-if="pageType >= 4" label="审核完成时间">{{ props.row.reviewTime }}</el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="故障详细信息">
                        <span>{{ props.row.residentRemarks }}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row v-if="pageType >= 3">
                    <el-col :span="24">
                      <el-form-item label="维修人反馈">
                        <span>{{ props.row.repairmanRemarks }}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row v-if="pageType === 4">
                    <el-col :span="24">
                      <el-form-item label="审核人备注">
                        <span>{{ props.row.reviewerRemarks }}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
              <div>
                <el-image
                  style="width: 200px; height: 200px"
                  :src="url"
                  :fit="fit"
                />
              </div>
            </div>
          </template>
        </el-table-column>
        <!-- 序号! -->
        <el-table-column label="ID" prop="id" align="center" width="80">
          <!--获得该行的数据-->
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <!-- 时间! -->
        <el-table-column label="上报时间" prop="datetime" width="200" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.assignTime }}</span>
          </template>
        </el-table-column>
        <!-- 区域和类型！ -->
        <el-table-column label="故障类型" prop="type" width="150" align="center" />
        <el-table-column label="故障类型" prop="faultType" width="150" align="center" />
        <!-- 具体描述 -->
        <el-table-column label="故障简介" prop="des" align="center" />
        <!-- 位置! -->
        <el-table-column label="位置" prop="address" width="250" align="center" />
        <!-- 时限! -->
        <el-table-column label="时限" prop="limitTime" width="110" align="center">
          <template slot-scope="scope">
            <span>{{ 4-scope.row.importance }} 天</span>
          </template>
        </el-table-column>

        <el-table-column label="故障程度" prop="importance" width="80px" align="center">
          <template slot-scope="{row}">
            <svg-icon v-for="n in + row.importance" :key="n" icon-class="star" />
          </template>
        </el-table-column>
        <!-- 维修人员！ -->
        <el-table-column v-if="pageType > 0" label="维修人员" prop="repairman.name" align="center" width="100">
          <template slot-scope="{row}">
            <span v-if="row.status !== 'unDistribution'" class="link-type" @click="handleFetchRM(row.repairman)">{{ row.repairman.name }}</span>
            <span v-else style="color: red">{{ row.status | statusFilter }}</span>
          </template>
        </el-table-column>
        <!--        &lt;!&ndash; 状态! &ndash;&gt;-->
        <!--        <el-table-column v-if="faultType !== 'assignment'" label="状态" prop="status" class-name="status-col" width="100">-->
        <!--          <template slot-scope="{row}">-->
        <!--            <el-tag size="medium">-->
        <!--              {{ row.status | statusFilter }}-->
        <!--            </el-tag>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--    操作    -->
        <el-table-column v-if="pageType >= 0 && pageType <= 4" label="操作" align="center" width="150" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button
              v-if="row.status === 0"
              type="text"
              size="mini"
              @click="showRepairman(row)"
            >
              分配
            </el-button>
            <el-button
              v-if="row.status === 1"
              type="text"
              size="mini"
              @click="showRepairman(row)"
            >
              重分配
            </el-button>
            <el-button
              v-if="row.status === 3"
              type="text"
              size="mini"
              @click="showCheckDialog(row)"
            >
              审核
            </el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>

    <!--     分页管理-->
    <div style="display: flex;justify-content: flex-end;margin-top: 10px">
      <el-pagination
        background
        layout="total,sizes,prev,pager,next,jumper,->,slot"
        :page-sizes="[5,10,20,50,100]"
        :total="total"
        @current-change="currentChange"
        @size-change="sizeChange"
      />
    </div>

    <!--  点击分配或重新分配弹出分配对话框  -->
    <el-dialog :visible.sync="accountDialogVisible" title="分配任务">
      <!--   选中的维修人员信息   -->
      <el-form :model="temp">
        <el-row>
          <el-col :span="6">
            <el-form-item label="故障ID:">
              <span>{{ temp.faultId }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="工号">
              <el-input v-model="temp.workId" style="width: 150px" />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="姓名">
              <el-input v-model="temp.name" style="width: 150px" />
            </el-form-item>
          </el-col>
        </el-row>
        <!--   维修人员搜索框     -->
        <div class="filter-container">
          <!-- 工号 -->
          <el-input
            v-model="accountQuery.id"
            placeholder="工号"
            style="width: 120px;"
            class="filter-item"
            @keyup.enter.native="queryAccount"
          />
          <!-- 姓名 -->
          <el-input
            v-model="accountQuery.name"
            placeholder="姓名"
            style="width: 120px;"
            class="filter-item"
            @keyup.enter.native="queryAccount"
          />
          <!-- 地址 -->
          <el-input
            v-model="accountQuery.address"
            placeholder="地址"
            style="width: 300px;"
            class="filter-item"
            @keyup.enter.native="queryAccount"
          />
          <!-- 搜索按钮 -->
          <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="initAccount">
            搜索
          </el-button>
        </div>
      </el-form>
      <!--   维修人员列表   -->
      <el-table
        :data="accounts"
        stripe
        border
        fit
        highlight-current-row
        style="width: 100%;margin-top: 20px"
      >
        <!-- 序号! -->
        <el-table-column label="工号" prop="id" align="center" min-width="20%" />

        <el-table-column label="姓名" prop="name" align="center" min-width="20%" />

        <el-table-column label="联系方式" prop="phone" align="center" min-width="45%" />
        <!-- 操作! -->
        <el-table-column label="操作" align="center" min-width="15%" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" @click="temp.workId = row.id;temp.name = row.name;temp.phone=row.phone">
              选择
            </el-button>
          </template>
        </el-table-column>

      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button>
          取消
        </el-button>
        <el-button type="primary" @click="addRepairman">
          确认
        </el-button>
      </div>
    </el-dialog>

    <!--  审核对话框对话框  -->
    <el-dialog :visible.sync="checkDialog" title="审核维修任务">
      <el-form :model="checkInfo">
        <el-form-item label="是否合格">
          <el-switch v-model="checkInfo.adopt" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="checkInfo.remarks" type="textarea" :rows="3" placeholder="请输入不合格原因或合格备注" style="width: 80%" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button>
          取消
        </el-button>
        <el-button type="primary" @click="submitChecked(row)">
          提交
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { fetchFaults, updateFaults, submitCheck } from ''
import { fetchFaults, fetchAccounts } from "../../utils/repairData";
// import { fetchRepairman } from '@/api/baseInfo/base-info'
// 故障类型数组，先写死之后从后端请求
const faultTypesOptions = ['漏水', '漏电', '停电', '井盖损坏']
const typeOptions = ['公共区域', '私人区域', '全部']
const limitTimesOptions = [1, 2, 3]
const impotenceOptions = [1, 2, 3]
export default {
  name: 'FaultData',
  filters: {
    statusFilter: function(value) {
      const statusMap = {
        'ready': '分配中',
        'unDistribution': '未分配'
      }
      return statusMap[value]
    }
  },
  // 从父组件接收的值
  props: {
    // eslint-disable-next-line vue/require-default-prop,vue/require-prop-type-constructor
    pageType: undefined,
    // 存放原始数据，在此基础上做过滤
    faults: undefined,
    // eslint-disable-next-line vue/require-default-prop,vue/require-prop-type-constructor
    total: 0
  },
  data() {
    return {
      url: '',
      types: typeOptions,
      faultTypes: faultTypesOptions,
      limitTimes: limitTimesOptions,
      importanceArray: impotenceOptions,
      originalFaults: [],
      queryData: {
        id: '',
        assignTimeRange: '',
        pageType: Number,
        page: 1,
        size: 10,
        type: '',
        faultTypes: [],
        limitTimes: [],
        importanceArray: []
      },
      // 维修人员对话框
      accountDialogVisible: false,
      // 分配维修人员的临时信息
      temp: {
        faultId: '',
        workId: '',
        name: '',
        phone: ''
      },
      // 分配维修人员的查询条件
      accountQuery: {
        role: 'repairman',
        id: '',
        name: '',
        address: ''
      },
      //  维修人员列表
      accounts: [],
      //  审核所用数据
      checkDialog: false,
      checkInfo: {
        faultId: Number,
        // 是否合格
        adopt: false,
        remarks: ''
      }
    }
  },
  methods: {
    initFaults() {
      this.queryData.pageType = Number(this.pageType)
      const response = fetchFaults(this.queryData)
      this.faults = response.data.faults
      this.total = response.data.total
    },
    currentChange(currentPage) {
      this.queryData.page = currentPage
      this.initFaults()
    },
    sizeChange(size) {
      this.queryData.size = size
      this.initFaults()
    },
    typeChanged() {
      console.log('===============')
      console.log(this.queryData.type)
      // 先保存原 faults 数组
      if (this.queryData.type !== '' && this.queryData.type !== '全部') {
        if (this.originalFaults.length === 0) {
          this.originalFaults = this.faults
        }
        this.faults = this.originalFaults.filter(fault => {
          console.log(fault.type)
          console.log('===============')
          console.log(this.queryData.type)
          return fault.type === this.queryData.type
        })
      } else {
        this.faults = this.originalFaults
      }
    },
    faultTypesChanged() {
      if (this.queryData.faultTypes.length > 0) {
        if (this.originalFaults.length === 0) {
          this.originalFaults = this.faults
        }
        this.faults = this.originalFaults.filter(fault => {
          let flag = false
          this.queryData.faultTypes.filter(type => {
            if (fault.faultType === type) flag = true
          })
          return flag
        })
      } else {
        this.faults = this.originalFaults
      }
    },
    limitChanged() {
      if (this.queryData.limitTimes.length > 0) {
        if (this.originalFaults.length === 0) {
          this.originalFaults = this.faults
        }
        this.faults = this.originalFaults.filter(fault => {
          let flag = false
          this.queryData.limitTimes.filter(limit => {
            if (fault.limitTime === limit) flag = true
          })
          return flag
        })
      } else {
        this.faults = this.originalFaults
      }
    },
    importanceChanged() {
      if (this.queryData.importanceArray.length > 0) {
        if (this.originalFaults.length === 0) {
          this.originalFaults = this.faults
        }
        this.faults = this.originalFaults.filter(fault => {
          let flag = false
          this.queryData.importanceArray.filter(importance => {
            if (fault.importance === importance) flag = true
          })
          return flag
        })
      } else {
        this.faults = this.originalFaults
      }
    },
    search() {
      if (this.originalFaults.length === 0) {
        this.originalFaults = this.faults
      }
      if (this.queryData.id !== '') {
        this.faults = this.originalFaults.filter(fault => {
          console.log('=====================')
          // 这里就是双等号
          return fault.id === Number(this.queryData.id)
        })
      } else if (this.queryData.assignTimeRange !== '') {
        const startTime = JSON.parse(JSON.stringify(this.queryData.assignTimeRange))[0]
        const endTime = JSON.parse(JSON.stringify(this.queryData.assignTimeRange))[1]
        this.faults = this.originalFaults.filter(fault => {
          const stringTime = fault.assignTime
          const timestamp = Date.parse(new Date(stringTime))
          // 这里就是双等号
          return timestamp >= startTime && timestamp <= endTime
        })
      } else {
        this.faults = this.originalFaults
      }
    },
    //  点击分配初始化维修人员信息
    showRepairman(fault) {
      this.accountDialogVisible = true
      this.temp.faultId = fault.id
      this.initAccount()
    },
    //  初始化维修人员
    initAccount() {
      const response = fetchAccounts(this.accountQuery)
      this.accounts = response.data.accounts
    },
    //  分配维修人员
    addRepairman() {
      this.faults = this.faults.filter(item => {
        return item.id !== this.temp.faultId
      })
      this.accountDialogVisible = false
      this.$message({
        message: '分配成功',
        type: 'success'
      })
    },
    initAccountQuery() {
      this.accountQuery = {
        role: 'repairman',
        id: '',
        name: '',
        address: ''
      }
    },
    // 打开审核对话框
    showCheckDialog(fault) {
      this.checkInfo.faultId = fault.id
      this.checkDialog = true
    },
    submitChecked() {
      this.faults = this.faults.filter(item => {
        return item.id !== this.checkInfo.faultId
      })
      this.checkDialog = false
      this.$message({
        message: '审核成功',
        type: 'success'
      })
    }
  }
}
</script>

<style>

</style>
